<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.goHome()" href="javascript:void(0)"
          ><img class="back-btn" src="../../../../static/images/back.png"
        /></a>
        <div class="header-search flex-center">党员学习</div>
      </div>
    </header>
    <div class="flex-between-center record-header">
      <h3 class="flex-center">
        <img src="../../../../static/images/zzsh_title.png" />党员学习计划安排
      </h3>
      <div
        @click="showTimePicker()"
        id="recordYyear"
        class="year-btn flex-center"
      >
        <span id="recordTimes">{{ year }}</span
        >年
        <img
          class="arrow_icon"
          src="../../../../static/images/select_down.png"
        />
      </div>
    </div>
    <div class="mui-page-content record-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll mui-scroll-wrapper">
          <div class="mui-table-view organization-lists">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view-cell"
                    v-for="(data, index) in swipeData"
                    :key="data.id"
                  >
                    <div @click="detail(data)">
                      <h2 class="organization-lists-title">{{ data.title }}</h2>
                      <div class="organization-lists-time">
                        <span
                          >{{ fn.formateYearSecond(data.createTime) }}&nbsp;{{
                            data.createByName
                          }}&nbsp;{{ data.createGroupName }}</span
                        >
                      </div>
                    </div>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar    start -->
    <partyMemberLearningFooterbar></partyMemberLearningFooterbar>
  </div>
</template>

<script>
import partyMemberLearningFooterbar from "../common/partyMemberLearningFooterbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
export default {
  components: {
    partyMemberLearningFooterbar,
  },
  name: "study",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      year: new Date().getFullYear(),
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    detail(data) {
      this.$router.push({ path: `/studyPlan/${data.id}` });
    },
    showTimePicker() {
      if (!this.datePicker) {
        let me = this;
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 1,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(me.year, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = new Date(selectedTime).getFullYear();
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: new Date(this.year, 1, 1),
        });
      }, 1000);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.pageIndex = 0;
      this.swipeData = [];
      this.loadData();
    },
    loadData() {
      let userInfo = this.$store.state.userInfo;
      this.partyGroupId = userInfo.partyMemberModel.partyGroupId;
      let data = {
        year: this.year.toString(),
        pageIndex: this.pageIndex,
        pageSize: "1000",
        partyGroupId: this.partyGroupId,
        isFinished: "2",
      };
      loginService.getStudyPlanByYear(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
  },
};
</script>

<style scoped>
</style>
